<template>
    <div class="time" :class="{'flex-center': list.length == 0}">
        <div v-if="list.length > 0">
            <div class="address">
                <i class="iconfont icon-map-"></i>
                <div>装修监控位置：{{address}}</div>
            </div>
            <div class="video-list">
                <div class="video-item" v-for="item in list" @click="locationHref(item.id)">
                    <img :src="item.img" alt="">
                    <div class="video-address">{{item.address}}</div>
                    <div class="video-status" v-if="item.status == 1">
                        <i class="video-success"></i>
                        <span>监控中</span>
                    </div>
                    <div class="video-status" v-if="item.status == 0">
                        <i class="video-danger"></i>
                        <span>离线中</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="video-none" v-if="list.length === 0 && is_show">
            <img src="../../../assets/img/home/person.png" alt="">
            <div>你还未安装监控哦~</div>
            <div>具体可与我们工作人员联系</div>
        </div>
    </div>
</template>

<script>
    export default {
        name:'home',

        data() {
            return {
                address:'',
                list: [],
                is_show:false
            }
        },

        methods:{
          locationHref(id) {
              this.$router.push(`/home/time/live?id=${id}`);
          }
        },

        components:{

        },

        mounted() {
            this.axios.get('get_list',{params: {id: localStorage.slug}}).then(data => {
                if (data.status == 200) {
                    this.list = data.data;
                    this.address = data.address;
                    this.is_show = true;
                } else {
                    this.$toast('获取视频信息失败,请重新登陆');
                    this.$router.push('/login');
                }
            })
        }
    }
</script>

<style lang="less" scoped rel="stylesheet/less" type="text/css">
    @import '../../../plugins/assets/css/flex.less';
    .flex-center {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .time {
        background: #F7F9FA;
        /*padding-bottom: 50px;*/
        min-height:100vh;
        .address {
            .flex-left;
            color: #797979;
            font-size:4vw;
            padding: 5vw 3vw;
            i {
                font-size:5vw;
                margin-right: 2vw;
            }
        }
        .video-list {
            .flex-between;
            padding: 5vw 3vw;
            .video-item {
                width: 48%;
                height:40vw;
                position: relative;
                color: #fff;
                font-size:3vw;
                img {
                    position: absolute;
                    left:0;
                    top:0;
                    width: 100%;
                    height: 100%;
                }
                .video-address {
                    padding: 1vw;
                    background: rgba(0,0,0,.8);
                    position: absolute;
                    left:0;
                    top:0;
                }
                .video-status {
                    .flex-auto;
                    padding: 1vw 2vw;
                    position: absolute;
                    right:0;
                    top:0;
                    i {
                        width: 5px;
                        height: 5px;
                        margin-right: 10px;
                        .bor;
                    }
                    .video-success {
                        background: #7ED321;
                    }
                    .video-danger {
                        background: #D80000;
                    }
                }
            }
        }
    }
    .video-none {
        text-align: center;
        color: #9596AB;
        line-height: 6vw;
        img {
            width: 30vw;
            margin-bottom: 5vw;
        }
    }
</style>